<template>
  <div>
    <el-button type="primary" @click="addClass">添加班级</el-button>
    <el-table alert:center :data="dangqianData" style="width: 100%">
      <el-table-column prop="classId" label="ClassID" width="180">
      </el-table-column>
      <el-table-column prop="className" label="className" width="180">
      </el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button type="danger" @click="open(scope.row)">删除</el-button>
          <el-button @click="changeData(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :page-size="6"
      layout="prev, pager, next"
      @current-change="changePagre"
      :total="tableData.length"
    >
    </el-pagination>
    <tank
      :zhuangtai="dialogFormVisible"
      :changeData="from"
      :title="title"
      @updateTabData="updateTabData"
      @close="close"
    ></tank>
  </div>
</template>

<script>
// import * as api from "../utils/api";
import tank from "../components/myTab";
export default {
  data() {
    return {
      tableData: [],
      dangqianpage: 1,
      from: [],
      dialogFormVisible: false,
      title: "班级管理",
      form: {
        classId: "",
        className: "",
      },
    };
  },
  components: {
    tank,
  },
  created() {
    this.axios({
      url: "/getClass",
      method: "get",
    }).then((item) => {
      this.tableData = item.data.data;
    });
  },
  methods: {
    open(obj) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios({
            url: "/delClass",
            method: "post",
            data: {
              classId: obj.classId,
            },
          }).then((data) => {
            if (data.data.state.code == 200) {
              this.delmessageData = data.data.state.meg;
              this.tableData = data.data.data;

              this.$message({
                type: "success",
                message: "删除成功",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    changeData(obj) {
      this.from.classId = obj.classId;
      this.from.className = obj.className;
      this.title = "修改学生";
      this.dialogFormVisible = true;
    },
    close() {
      this.dialogFormVisible = false;
    },

    updateTabData(obj) {
      this.tableData = obj;
    },
    addClass() {
      this.title = "添加班级";
      this.dialogFormVisible = true;
    },
    changePagre(val) {
      this.dangqianpage = val;
      console.log(this.dangqianpage);
    },
  },
  computed: {
    dangqianData() {
      return this.tableData.slice(
        (this.dangqianpage - 1) * 6,
        this.dangqianpage * 6
      );
    },
  },
  watch: {},
};
</script>

<style></style>
